<template>
  <div>
    <div class="top">
      <el-input
        style="width: 300px"
        placeholder="请输入关键字搜索"
        prefix-icon="el-icon-search"
        v-model="inputValue"
      >
      </el-input>
      <div class="towBtn">
        <el-button @click="chongzhi" class="button">重置</el-button>
        <el-button type="primary" @click="chaxun" class="button"
          >查询</el-button
        >
      </div>
    </div>
    <TableUse
      v-loading="loading"
      :data="tableList"
      max-height="400px"
      ref="table"
      :default="defaultList"
      :tableConfig="tableConfig"
      :name="'pageId'"
      @selection-change="chooseList"
    ></TableUse>
    <div style="margin-top: 10px; text-align: center">
      <span slot="footer" class="dialog-footer">
        <el-button @click="diaClose">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </div>
  </div>
</template>

<script>
import { dispenseViewApi, getDescendantListApi } from '@/api/Device-all/Device-view'
import TableUse from '../../components/TableUse.vue'
export default {
  components: { TableUse },
  props: ['DistributeData'],
  data () {
    return {
      inputValue: '',
      loading: false,
      defaultList: [],
      form: {},
      deflist: [],
      tableList: [],
      tableConfig: [
        {
          align: 'left',
          prop: 'pageCode',
          label: '设备模型编码'
        },
        {
          align: 'left',
          prop: 'pageName',
          label: '设备模型名称'
        }

      ]
    }
  },
  created () {
    this.getDescendantList()
  },
  methods: {
    // 查询所有下级模型视图列表
    async getDescendantList () {
      this.loading = true
      const res = await getDescendantListApi(this.DistributeData.componentId)
      this.deflist = res.data.list
      this.tableList = res.data.list
      this.loading = false
    },
    async submit () {
      const res = await dispenseViewApi({
        componentId: this.DistributeData.componentId,
        pageId: this.form.pageId
      })
      if (res.code == 200) {
        this.$message({
          type: 'success',
          message: res.message,
          duration: 2000
        })
        this.$emit('diaClose')
      } else {
        this.$message({
          type: 'error',
          message: res.message,
          duration: 2000
        })
      }
    },
    chooseList (arr) {
      console.log(arr)
      this.form.pageId = arr
    },
    diaClose () {
      this.$emit('diaClose')
    },
    chongzhi () {
      this.inputValue = ''
      this.getDescendantList()
    },
    async chaxun () {
      await this.getDescendantList()
      const list = [...this.deflist]
      if (this.inputValue) {
        this.tableList = list.filter(
          (item) =>
            item.pageCode.includes(this.inputValue) ||
            item.pageName.includes(this.inputValue)
        )
      } else {
        this.tableList = [...list]
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.button {
  //   width: 60px;
  padding: 10px 20px;
  margin-right: 5px;
  border-radius: 3px;
}
</style>
